<template>
	<view class="clubItem">
		<Tag type="warn" tag="审核中" class="statuTag" v-if="data.joinStatus === 0" />
		<Tag type="danger" tag="已拒绝" class="statuTag" v-if="data.statu === 2" />
		<Tag type="normal" tag="管理员" class="statuTag" v-else-if="data.role === 'club_admin'" />
		<view class="bgImg">
			<image :src="data.clubLogo || `../../static/logo.png`" mode="aspectFill"></image>
		</view>
		<view class="name">{{ data.clubName }}</view>
		<view class="tag">{{ data.clubIntro }}</view>
		<view class="creater">创办人:<text>{{ data.founder }}</text></view>
	</view>
</template>

<script setup>
	import Tag from './Tag.vue'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		},
	})
</script>

<style lang="less" scoped>
	.clubItem {
		width: 95%;
		margin: 20rpx auto;
		min-height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		color: #fff;

		.statuTag {
			z-index: 20;
			position: absolute;
			top: 20rpx;
			right: 30rpx;
		}

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
			background-color: rgba(0, 0, 0, 0.25);
		}

		.bgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			image {
				height: 100%;
				width: 100%;
				z-index: -1;
			}
		}

		.name {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 35rpx;
			font-weight: 550;
			margin-left: 30rpx;
			z-index: 10;
		}

		.tag {
			line-height: 40rpx;
			font-size: 28rpx;
			margin-left: 30rpx;
			z-index: 10;
		}

		.creater {
			line-height: 40rpx;
			font-size: 28rpx;
			margin-left: 30rpx;
			z-index: 10;
			margin-bottom: 10rpx;

			text {
				margin: 0 10rpx;
				line-height: 40rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
				background-color: rgba(247, 248, 250, 0.4);
				backdrop-filter: blur(10px);
				z-index: 10;
			}
		}
	}
</style>